<template>
    <el-container style="background-color:#f0f3f4">
        <el-header style="background-color:#ffff"  v-show="isShowBtn==1">
            <tool-bar :pageName="pageName"></tool-bar>
        </el-header>
        <el-main justify="center" align="middle" >
            <!--主要区域容器-->
            <el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
                <div v-for="gf in groupFields" v-bind:key="gf.OID">
                    <div style="text-align: left">{{gf.Lab}}</div>
                    <el-divider></el-divider>
                    <template v-if="gf.CtrlType == '' || gf.CtrlType == null">
                        <MapAttrForm
                                :mainData="gf.mainData"
                                :mapAttrs="gf.MapAttrs"
                                @on-mainData-change="ChangeMainData">
                        </MapAttrForm>
                    </template>
                    <template v-if="gf.CtrlType=='Ath'">
                       <Ath></Ath>
                    </template>
                </div>
            </el-form>  
             <el-form v-else-if="node.FormType===1" id="FrmFree"> 
                    自由表单
            </el-form>  
             <el-form v-else-if="node.FormType===5" > 
                    树形表单
            </el-form>  
             <el-form v-if="node.FormType===12" id="FrmDevelop"  v-html="developHtml" :style="{width:widthStyle}" style="background-color:#ffff;margin:0px auto;padding:5px 10px"> 
                    开发者表单
                    {{developHtml}}
            </el-form>
            <div id="divinfo" v-show="isShowDiv">
            </div>
            <!--pop弹出框-->
            <el-dialog
                :title="Poptitle"
                :visible.sync="popVisible"
                :width="popWidth"
                height="80%"
                :before-close="handleClose">
                <popbranchesandleaf ref="popbranchesandleaf" v-if="PopOperation == 'PopBranchesAndLeaf'" v-bind:proParams="popParams"></popbranchesandleaf>
            </el-dialog>

        </el-main>
       
    </el-container>
    
    
</template>
<script>
import ToolBar from "./components/tool-bar.vue";
import MapAttrForm from "./components/mapAttrForm.vue"
import Ath from "./ccform/ath.vue"
import{GenerWorkNode,Save} from '@/api/MyFlowGener.js'
import {ParseDevelopFrm} from '@/api/FrmDevelop.js';
import {LoadFrmDataAndChangeEleStyle} from '@/api/FrmEnd.js';
import popbranchesandleaf from "./ccform/Pop/BranchesAndLeaf.vue";
import {ClosePopFunc} from '@/api/js/Pop.js';

export default {
    components: {
        ToolBar,
        MapAttrForm,
        popbranchesandleaf,
        Ath,
    },
    data(){
        return{
            width:'900px',
            params:{}, //参数
            webUser:{},//人员信息
            node:null, //节点信息
            mainData:null,//表单数据
            mapAttrs:{},//表单字段
            groupFields:[],//分组
            mapExts:[],
            developHtml:'',
            flowData:null,//表单的所有数据
            isShowDiv:false,
            Poptitle:'',
            popVisible:false,
            popWidth:'50%',
            PopOperation:'',
            popParams:[],
            isShowBtn:1,
            form: {
            },
            pageName:"MyFlow",//流程处理器页面
            isReadonly:0,
        }
    },

    computed:{
        widthStyle: function() {
            return this.flowData.Sys_MapData[0].FrmW + 'px';
        }
    },
    created(){
        this.params = this.$route.params;
        this.webUser = this.$store.getters.getWebUser;
        //初始化按钮
        this.isShowBtn = this.params.IsShowBtn;
        //获取表单数据
        GenerWorkNode(this);

        this.mainData = this.flowData.MainTable[0];
        this.mapAttrs = this.flowData.Sys_MapAttr;
        this.groupFields = this.flowData.Sys_GroupField;
        this.mapExts = this.flowData.Sys_MapExt;
        this.GenerFool();
    },
    methods:{
        GenerFool(){
            let _this = this;
            this.groupFields.forEach(gf=>{
                if(gf.CtrlType==""){
                    gf.mainData={};
                    gf.MapAttrs=this.$.grep(this.mapAttrs, function (mapAttr) {
                        //处理mapAttr的信息
                        if(mapAttr.GroupID == gf.OID){
                            gf.mainData[mapAttr.KeyOfEn]=_this.mainData[mapAttr.KeyOfEn];
                            return _this.mapAttr_parse(mapAttr);

                        }
                    });
                }
                if(gf.CtrlType=="Ath"){
                    var aths = this.$.grep(this.flowData.Sys_FrmAttachment, function (ath) {
                        return ath.MyPK == gf.CtrlID
                    });
                    if(aths==null ||aths.length==0){
                        this.$message.warning("附件" + gf.CtrlID + "信息丢失");
                        return true;
                    }
                    gf.Ath = aths[0];

                }
            });
        },
        mapAttr_parse(mapAttr){
            let options=[];
            //外键
            if(mapAttr.UIContralType == 1){
                //获取外键数据
                options = this.InitDDLOperation(mapAttr);
                mapAttr.options=options;
            }
            mapAttr.rules=[];
            if(mapAttr.UIContralType==2)
                this.mainData[mapAttr.KeyOfEn] = this.mainData[mapAttr.KeyOfEn]==0?false:true;

            if(mapAttr.UIIsEnable == 1){

                if(mapAttr.UIIsInput == 1){
                    mapAttr.rules.push({ required: true, message: mapAttr.Name+"不能为空"});
                }
                if(mapAttr.MyDataType==2){
                    mapAttr.rules.push({type: 'number', message: mapAttr.Name+'必须为整数值', trigger: 'blur'});
                }
            }
            //可编辑时扩展处理
            if(mapAttr.UIVisible==1){
                let mapExts = this.findMapExt(mapAttr);
                if(mapExts.length>0){
                    mapAttr.IsHaveMapExt = true;
                    mapAttr.mapExts = mapExts;
                }else
                    mapAttr.IsHaveMapExt = false;

            }
            if (mapAttr.MyDataType == 6 || mapAttr.MyDataType==7){
                let frmDate = mapAttr.IsSupperText;//获取日期格式
                switch(frmDate){
                    case 0:
                        mapAttr.FormatType = "yyyy-MM-dd";
                        break;
                    case 1:
                        mapAttr.FormatType = "yyyy-MM-dd HH:mm";
                        break;
                    case 2:
                        mapAttr.FormatType = "yyyy-MM-dd HH:mm:ss";
                        break;
                    case 3:
                        mapAttr.FormatType = "yyyy-MM";
                        break;
                    case 4:
                        mapAttr.FormatType = "HH:mm";
                        break;
                    case 5:
                        mapAttr.FormatType = "HH:mm:ss";
                        break;
                    case 6:
                        mapAttr.FormatType = "MM-dd";
                        break;
                    default:
                        break;
                }
            }

            return mapAttr;
        },
        InitDDLOperation(attr){
            let data = this.flowData[attr.KeyOfEn];
            if (data == undefined)
                data = this.flowData[attr.UIBindKey];
            if (data == undefined) {
                data=[];
                //枚举类型的.
                if (attr.LGType == 1) {
                    let enums = this.flowData.Sys_Enum;
                    enums.forEach(item=>{
                        if(item.EnumKey==attr.UIBindKey)
                            data.push({"No":item.IntKey,"Name":item.Lab});
                    });
                }
            }
            return data;
        },
        findMapExt(mapAttr){//查找扩展应用
              return  this.$.grep(this.mapExts,function(mapExt){
                    return mapExt.AttrOfOper==mapAttr.KeyOfEn && mapExt.FK_MapData==mapAttr.FK_MapData;
                });
        },
       Save(){//保存
           Save();
       },
        ChangeMainData(value){
            for(var key in this.value) {
                this.mainData[key]=value[key];

            }

        },
       handleClose:function(done){
          //获取子组件中数据
           var selectRows = this.$refs.popbranchesandleaf.getvalue();
          //var selectRows=[];
            selectRows.push({"No":"zhanghaicheng",Name:"张海成"});
          if(selectRows.length!=0){
              //执行相关的操作
              ClosePopFunc(this.popParams,selectRows);
          }
          done();
       },
      
    },

    mounted(){
        //开发者表单，加载完页面元素后解析页面
        if(this.node.FormType === 12){
            ParseDevelopFrm(this.$route.params,this.flowData);
        }
        LoadFrmDataAndChangeEleStyle(this.flowData,this.$route.params);

        if (this.node.FormType == 11) {
            //获得配置信息.
            var frmNode = this.flowData["FrmNode"];
            if (frmNode) {
                frmNode = frmNode[0];
                if (frmNode.FrmSln == 1) {
                    /*只读的方案.*/
                    //alert("把表单设置为只读.");
                    this.$tools.SetFrmReadonly();
                }


                    //处理下拉框级联等扩展信息
                    //AfterBindEn_DealMapExt(this.flowData,this);
            }
        } else {
            //处理下拉框级联等扩展信息
            //AfterBindEn_DealMapExt(this.flowData,this);
        }
         this.$tools.HelpOper(this.node.HelpRole,this.params.FK_Node,this);
        
    }
}

</script>
<style scoped>

/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
  html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
 
    .el-header {
        width: 100%;
        height: 56px !important;
        line-height: 56px;
        padding: 0 20px 0 44px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
        box-sizing: border-box;
        top: 0;
    }
    /deep/.el-divider--horizontal{
        margin:12px 0px;
    }
    
</style>

